//
//  TabView.swift
//  ClothAccess
//
//  Created by Wei Hua on 2021/2/3.
//

import SwiftUI

struct TabView: View {
    
    @EnvironmentObject var TabObservable: TabViewObservable
       
    var TabViewBarHeight: CGFloat = 70
    var horizontal: CGFloat = 10    // 水平缩进
    var spacingZroe: CGFloat = 0    // 零垂直间距
    var spacingValue: CGFloat = 8   // 垂直间距
    var TabLength: CGFloat {
        CGFloat(TabObservable.tabItemData.count)
    }
    
    var nextTabIndex: Int {
        TabObservable.selected >= 4 ? 0 : TabObservable.selected + 1
    }
    
    var body: some View {
        NavigationView {
            ZStack {
                // 视图
                AnyView(_fromValue: TabObservable.getItem().view)
                    .navigationBarHidden(TabObservable.navigationBarHiddenStatus)
                // TabView
                GeometryReader { proxy in
                    VStack(spacing: spacingZroe) {
                        ZStack {
                            GeometryReader { proxy in
                                HStack {
                                    Spacer()
                                        .frame(width: CGFloat(proxy.size.width / self.TabLength), height: TabViewBarHeight - 25)
                                        .background(
                                            LinearGradient(gradient: Gradient(colors: [
                                                                                TabObservable.getItem().backgroundColor, TabObservable.tabItemData[nextTabIndex].backgroundColor]), startPoint: .topLeading, endPoint: .bottomTrailing)
                                        )
                                        .cornerRadius(15)
                                        .offset(x: CGFloat(CGFloat((TabObservable.selected)) * (proxy.size.width / self.TabLength)))
                                        .animation(.easeInOut(duration: 0.3))
                                    
                                    Spacer()
                                }
                                .frame(width: proxy.size.width, height: proxy.size.height, alignment: .center)
                            }
                            .padding(.horizontal, horizontal)
                            
                            HStack(alignment: .center, spacing: spacingZroe) {
                                ForEach(0..<TabObservable.tabItemData.count) { index in
                                    HStack {
                                        Tab(tab: TabObservable.tabItemData[index])
                                    }
                                }
                            }
                            .padding(.horizontal, horizontal)
                        }
                        .frame(height: TabViewBarHeight - 15)
                        Spacer()
                    }
                    .frame(height: TabViewBarHeight)
                    .background(Color("Background"))
                    .position(x: CGFloat(proxy.size.width / 2),y: CGFloat(proxy.size.height - (TabViewBarHeight / 2)))
                }
            }
            .edgesIgnoringSafeArea(.all)
        }
    }
}

struct TabView_Previews: PreviewProvider {
    static var previews: some View {
        TabView()
            .environmentObject(TabViewObservable.shared)
    }
}


struct Tab: View {
    
    var tab: tabItem
    @EnvironmentObject var TabObservable: TabViewObservable
    
    var body: some View {
        GeometryReader { proxy in
            Button(action: {
                TabObservable.setSelected(tab)
            }, label: {
                VStack {
                    Image(systemName: tab.img)
                        .foregroundColor(tab.showTxt ? .white : .black)
                        .animation(.easeInOut(duration: 0.5))
                    if tab.showTxt {
                        Spacer().frame(height: 5)
                        Text("\(tab.txt)")
                            .font(.system(size: 12))
                            .foregroundColor(.white)
                            .transition(AnyTransition.opacity.animation(.easeInOut(duration: 0.5)))
                    }
                }
            })
            .frame(width: proxy.size.width, height: proxy.size.height, alignment: .center)
        }
    }
}
